<template>
  <div>
    <div id="app">
      <Head title="购物车" bg="#fd1800" color="#fff" />
      <Good v-for="item in list" :key="item.id" :goodItem="item" />
      <Foot :list="list" />
    </div>
  </div>
</template>

<script>
import Head from './views/Head.vue'
import Good from './views/Good.vue'
import Foot from './views/Foot.vue'

export default {
  name: 'App',
  components: {
    Head,
    Good,
    Foot
  },
  data () {
    return {
      list: []
    }
  },
  // 用来写请求方法
  created () {
    this.getCarts()
  },
  methods: {
    /*     getCarts () {
      this.axios({
        url: '/api/cart',
        method: 'get'
      }).then(res => {
        const { list } = res.data
        console.log(list)
        this.list = list
      })
    } */

    async getCarts () {
      const { data: { list } } = await this.axios({
        url: '/api/cart'
      })
      console.log(list)
      this.list = list
    }
  }
}
</script>

<style lang="less">
#app {
  padding: 45px 0 45px;
}
</style>
